<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逸云书院｜免费小说，完结小说，言情原创小说，玄幻，婚宠，萌宝，各类小说下载</title>
    <link rel="shortcut icon" href="./img/w01.jpg"></title>
    <link rel="shortcut icon" href="./img/yyfavicon.ico">
    <link rel="stylesheet" href="./css/bookIndex.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./font49/iconfont.css">
</head>
<body>
    <div class="topTitle">
        <div class="topCenter">
            <div class="topLeft">
                <a href="./wenxue.html">磨铁文学</a>
                 <a href="./hzhlaikan.html">来看中文网</a>
                 <a href="./jinwenshouye.html">锦文小说网</a>
                 <a href="./momoMain.html">墨墨言情网</a>
                <a class="active">逸云书院</a>

            </div>
            <div class="topRight">
                <a href="./login.html">登录</a>
                <a href="./login.html">注册</a>
               <a class="phone">手机版
                <div class="pho-tabs">
                    <em></em>
                    <ul class="hovers">
                        <li>
                            <img class="img1" src="./img/b-phon.jpg" alt="">
                            <div class="rightTop">
                                <p class="p1">磨铁阅读</p>
                                <p class="p2">让阅读更精彩</p>
                                <div class="imgs">
                                    <img src="./img/bk-apple.png" alt="">
                                    <img src="./img/bk-green.png" alt="">
                                </div>
                            </div>
                        </li>
                         <li>
                            <img class="img1" src="./img/b-phos1.jpg" alt="">
                            <div class="rightTop">
                                <p class="p1">关注磨铁微信</p>
                                <p class="p2">微信扫一扫关注</p>
                            </div>
                        </li>
                    </ul>
                </div>
               </a>
            </div>
        </div>
    </div>
    <div class="logo">
        <div class="logoCeter">
            <img src="./img/bimg1.png" alt="">
            <div style="display: flex;">
                <div class="search">
                    <input oninput="newSearch()" type="text" name="" id="" placeholder="找书">
                    <p></p>
                    <span></span>
                </div>
                <ul class="searchList">
                  
                </ul>
                <div class="bookShlef">
                    <span></span>
                    <p>我的书架</p>
                </div>
            </div>

        </div>
    </div>
    <div class="firstNav">
        <ul>
            <li class="active1"><a href="bookIndex.html">首页</a></li>
            <li><a href="b-booklists.html">书库</a></li>
            <li><a href="b-bookrank.html">排行</a></li>
            <li><a href="b-author.html">作家专区</a></li>
            <li><a href="b-aware.html">福利</a><img class="dong" src="" alt=""></li>

        </ul>
    </div>
    <div class="container">
        <div class="con-left">
            <div class="bookList">
                <div class="first">
                    <h2>本周强推</h2>
                </div>
                <ul class="booklists">
                   
                </ul>
            </div>
        </div>
        <div class="con-center swiper1">
             <div class="swiper-container">
                <div class="swiper-wrapper swp1">
                    
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination1"></div>
                <!-- Add Arrows -->
                <div class="custom-swiper-button custom-next"></div>
                <div class="custom-swiper-button custom-prev"></div>
            </div>
        </div>
         <div class="con-right">
            <div class="con-info">
                <div class="listTitle">
                    <div class="modTitle">
                        <div class="titlebd">
                            <h2>最新动态</h2>
                        </div>
                    </div>
                </div>
                <div class="info1">
                    <p>逸云书院2021年福利计划</p>
                </div>
                <div class="info1">
                    <p>逸云书院作品签约及推荐规则</p>
                </div>
                <div class="topic">
                    <div class="listTitle">
                        <div class="modTitle">
                            <div class="titlebd">
                                <h2>最新动态</h2>
                            </div>
                        </div>
                    </div>
                    <div class="swiper2">
                         <div class="swiper-container swipers2">
                            <div class="swiper-wrapper swp2">
                               
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <!-- Add Arrows -->
                            <!-- <div class="swiper-button-next"></div> -->
                            <!-- <div class="swiper-button-prev"></div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    <div class="hot">
        <div class="hotLeft">
            <div class="hottitle">
                <h2>热门推荐</h2>
            </div>
            <div class="hotinfo">
            </div>
        </div>
        <div class="hotRight">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>点击榜</h2>
                </div>
            </div>
            <ul class="rank-1">
                <a class="more" href="">查看更多>></a>
            </ul>
        </div>
    </div>
    <div class="bigimg">
    </div>
    <div class="goodbook">
        <div class="goodleft">
            <div>
                 <div class="mod-title">
                <div class="title-bd">
                    <h2>好书推荐</h2>
                    <ul class="tabs">
                    </ul>
                </div>
                </div>
                <div class="mod-con">
                    <div class="modlist">
                     
                    </div>
                </div>
            </div>
            <div class="namelits">
                <div class="line">
                 </div>
                <ul class="namebottom">
                    
                </ul>
            </div>  
        </div>
       <div class="goodright">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>推荐榜</h2>
                </div>
            </div>
            <ul class="goodlist">
                <li class="top">
                    <span>1</span>
                    <div style="margin-left: 20px; overflow: hidden;display: flex;">
                         <a href="">
                        <img src="https://cdn.motieimg.com/book/0015/150920/1.jpg?x-oss-process=image/resize,m_lfit,h_168,w_120" alt="">
                    </a>
                    <div class="goodone">
                        <a href="">偷心妈咪：爹地闪开宝宝来</a>
                    </div>
                    </div>
                </li>
            </ul>
       </div>
    </div>
    <div class="threeimg">
    </div>
    <div class="newbook">
        <div class="newleft">
            <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>新书推荐</h2>
                    </div>
                </div>
            </div>
            <div class="newbottom">
                <div class="newone">
                </div>
                <div class="line"></div>
                <div class="listbook2">
                  
                </div>
            </div>
        </div>
        <div class="newright">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>新书榜</h2>
                </div>
            </div>
            <ul class="rank-2">
                <li class="top">
                    <span class="nums">1</span>
                    <div class="book-block">
                        <a href="">
                            <img src="https://cdn.motieimg.com/book/app_book.png?x-oss-process=image/resize,m_lfit,h_168,w_120" alt="">
                        </a>
                        <div>
                            <a href="">视频会员帐号暴露了老公的秘密</a>
                            <span class="auth">作者：<a href="">蓓蓓</a></span>
                        </div>
                    </div>
                </li>
                <!-- <li  class="two">
                    <span>2</span>
                    <a href="">当他刻下她肩上的玫瑰</a>
                </li> -->
               
            </ul>
             <a class="more" href="">查看更多>></a>
        </div>
    </div>
    <div class="newbook1">
        <div class="newleft">
            <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>精品推荐</h2>
                    </div>
                </div>
            </div>
            <div class="newbottom">
                <div class="newone1">
                 
                </div>
                <div class="line"></div>
                <div class="listbook3">
                   
                </div>
            </div>
        </div> 
        <div class="newright">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>畅销榜</h2>
                </div>
            </div>
            <ul class="rank-3">
                <li class="top">
                    <span class="nums">1</span>
                    <div class="book-block">
                        <a href="">
                            <img src="https://cdn.motieimg.com/book/0011/116761/1.jpg?x-oss-process=image/resize,m_lfit,h_168,w_120" alt="">
                        </a>
                        <div>
                            <a href="">朱门贵女守则</a>
                            <span class="auth">作者：<a href="">鸿一菌</a></span>
                        </div>
                    </div>
                </li>
            </ul>
             <a class="more" href="">查看更多>></a>
        </div> 
    </div>
    <div class="bigimg1">
    </div>
    <div class="newbook2">
        <div class="newbookleft">
            <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>现代言情</h2>
                    </div>
                </div>
            </div>
            <div class="listbook4">
            </div>
            <div class="booklist1">
                <div class="line"></div>
                    <ul class="namebottom1">
                    </ul>
            </div>
            <div class="newbookbottom">
             <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>古代言情</h2>
                    </div>
                </div>
            </div>
            <div class="listbook5">
               
            </div>
            <div class="booklist2">
                <div class="line"></div>
                    <ul class="namebottom2">
                    
                    </ul>
            </div>
        </div>

        </div>
        <div class="newright1">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>VIP完结精品</h2>
                </div>
            </div>
            <ul class="rank-4">
                <li class="top">
                    <span class="nums">1</span>
                    <div class="book-block">
                        <a href="">
                            <img src="https://cdn.motieimg.com/book/0010/103347/1.jpg?x-oss-process=image/resize,m_lfit,h_168,w_120" alt="">
                        </a>
                        <div>
                            <a href="">采个娘子来养家</a>
                            <span class="auth">作者：<a href="">清都山水娘</a></span>
                        </div>
                    </div>
                </li>
                 
            </ul>
        </div> 
    </div>

    <div class="newbook3">
        <div class="newbookleft">
            <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>玄幻言情</h2>
                    </div>
                </div>
            </div>
            <div class="listbook6">
               
            </div>
            <div class="booklist3">
                <div class="line"></div>
                    <ul class="namebottom3">
                       
                    </ul>
            </div>
            <div class="newbookbottom3">
             <div class="listtitle">
                 <div class="mod-title">
                    <div class="title-bd">
                        <h2>其他</h2>
                    </div>
                </div>
            </div>
            <div class="listbook7">
               
            </div>
            <div class="booklist4">
                <div class="line"></div>
                    <ul class="namebottom4">
                        
                    </ul>
            </div>
        </div>

        </div>
        <div class="newright3">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>免费精品榜</h2>
                </div>
            </div>
            <ul class="rank-6">
                <li class="top">
                    <span class="nums">1</span>
                    <div class="book-block">
                        <a href="">
                            <img src="https://cdn.motieimg.com/book/0011/118424/4.jpg?x-oss-process=image/resize,m_lfit,h_168,w_120" alt="">
                        </a>
                        <div>
                            <a href="">妻色难挡，卫爷不好惹</a>
                            <span class="auth">作者：<a href="">萧无忧</a></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div> 
    </div>
    <div class="bigimg2">
        <a href="">
            <img src="https://cdn.motieimg.com/temp/9174bc96e2b861b69e78c72a7c55fb91.jpg?x-oss-process=image/resize,m_lfit,h_200,w_2400" alt="">
        </a>
    </div>
    <!-- 底部 -->
     <div class="clearfixer">
        <div class="listupdate">
            <div class="mod-title">
                <div class="title-bd">
                    <h2>最近更新</h2>
                    <a href="">更多>></a>
                    <ul class="tab">
                      
                    </ul>
                </div>
            </div>
            <div class="listbottom">
                <div class="contentall">
                    <div class="first">
                        <span class="classfis">分类</span>
                        <span class="name">书名</span>
                        <span class="newst">最新章节</span>
                        <span class="author1">作者</span>
                        <span class="time">更新时间</span>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="contactWE">
            <div class="listtitles">
                <div class="mod-title">
                    <div class="title-bd">
                        <h2>联系客服</h2>
                    </div>
                </div>
            </div>
            <div class="bd1">
                <p>
                    <span class="person">客服QQ：</span>
                    <span class="number">3469935628</span>
                    <a href=""><img src="" alt=""></a>
                    <br>
                    <span class="times">周一至周五9:00-18:00</span>
                </p>
                <p>
                    <span>客服邮箱：</span>
                    <span>kefu@motie.com</span>
                </p>
                  <p>
                    <span>客服座机：</span>
                    <span>010-82069306<br> 
                    </span>
                    <span>周一至周五9:00-18:00</span>
                </p>
                <p>
                    <a href="">常见问题</a>
                </p>
            </div>
            <div class="editor">
                <span class="contact">联系编辑：</span>
                <p>
                    <span>总编辑</span>
                    <span>鲁大爷QQ：2026888792</span>
                </p>
                 <p>
                    <span>各组主编</span>
                    <span>橙子 QQ：2713178922</span>
                </p>
                <p>桃子  QQ：2404316262</p>
                <p>
                    <span>签约编辑</span>
                    <span>碧栀栀QQ：2180675161</span>
                </p>
                <p>
                    <span>备注</span>
                    <span>签约主体：北京秀闻科技有限公司 若合同签约主体非北京秀闻科技有限公司，均与本公司无关。</span>
                </p>
            </div>
        </div>
     </div>
       <div class="footer">
        <div class="footer-default">
            <div>
                <p class="font">
                    <a>磨铁文学旗下网站：</a>
                    <a>来看中文网</a>
                    <a>锦文小说网</a>
                    <a>墨墨言情网</a>
                    <a>逸云书院</a>
                    <br>
                    <a>关于我们</a>
                    <a>联系我们</a>
                    <a>加入我们</a>
                    <a>帮助中心</a>
                    <a>网站地图</a>
                </p>
                <p class="announce">
                    Copyright © 2011-2025 LAIKAN.COM All Rights Reserved.  北京来看科技有限公司 版权所有
                    <br>
                    增值电信业务经营许可证 京B2-20190319  丨  网络出版服务许可
                    证 (署）网出证（京）字第325号  丨  
                    <a>京ICP备17040734号-1</a>
                    <br>
                    <a>网络违法犯罪举报</a>
                    丨
                    <a>中国互联网举报中心</a>
                    丨
                    <a>网络举报APP下载</a>
                    <br>
                </p>
                <div>
                    <a>
                        <img src="https://pic.motieimg.com/web-pc-my3/dist/static/img/guohui.d0289dc.png" alt="">
                        <p>京公网安备 11010202009584号</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="rfloat">
        <ul>
            <li class="r-1">
                <a>
                    <p class="rightSpan">最近阅读</p>
                    <!-- <p class="bg"></p> -->
                </a>
            </li>
            <li class="r-2">
                <a>
                    <i></i>
                    <p class="rightSpan">充值</p>
                </a>
            </li>
            <li class="r-3">
                <a>
                    <i></i>
                    <p class="rightSpan">客服</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="scrolls">
        <div class="scenter">
            <div class="lefts">
                <ul class="tops">
                     <li><a href="">逸云书院</a></li> 
                </ul>
                <div class="more">
                    <a class="mores" href="" >更多</a>
                    <div class="moreStyle">
                
                    </div>
                </div>
            </div>
            <div class="rights">
                <div style="display: flex;">
                    <div class="search">
                        <input type="text" name="" id="" placeholder="找书">
                        <p></p>
                        <span></span>
                    </div>
                    <div class="bookShlef">
                        <span></span>
                        <p>我的书架</p>
                    </div>
                </div>
           
             </div>
        </div>
       
    </div>
</body>
<script src="./js/swiper.min.js"></script>
<!-- <script src="./js/swiper-bundle.min.js"></script> -->
  <script>
    const booklists=document.querySelector('.booklists')
    const swipers=document.querySelector('.swp1')
    const swp2=document.querySelector('.swp2')
    const hotinfo=document.querySelector('.hotinfo')
    const bigimg=document.querySelector('.bigimg')
    const rank1=document.querySelector('.rank-1')
    const goodlist=document.querySelector('.goodlist')
    const modlist=document.querySelector('.modlist')
    const tabs=document.querySelector('.tabs')
    const namebottom=document.querySelector('.namebottom')
    let goodRecommendHot = [];
    let goodRecommendFree = [];
    let goodRecommendFinish = [];
    const newone=document.querySelector('.newone')
    const listbook2=document.querySelector('.listbook2')
    const rank2=document.querySelector('.rank-2')
     const newone1=document.querySelector('.newone1')
    const listbook3=document.querySelector('.listbook3')



// 跳转详情页

    function jumps(id){
        if(sessionStorage.getItem('account')){
             window.location.href=`./yy-bookDetail.html?id=${id}`;
        }else{
             window.location.href='./login.html'
        }
        console.log(id)
    }


    // 左侧
    arr2=['热门','免费','完本']
    arr2.forEach((item,index)=>{
         const isActive = index === 0 ? 'on' : '';
        tabs.innerHTML+=`
         <li class="${isActive}" onmouseout="getchanges()" onmouseover="getchange(event)">${item}</li>
        `
    })
    function getchange(event){
       const tabtext = event.target.innerHTML;

        let list = [];
         const tab = event.target.closest('li');
        if (tab) {
            // 移除所有标签的active类
            document.querySelectorAll('.tabs li').forEach(li => li.classList.remove('on'));
            // 给当前标签添加active类
            tab.classList.add('on');}
        // event.target.style.color="red"
        // 根据标签选择对应数据（此时全局变量已赋值）
        if (tabtext === '完本') {
            list = goodRecommendFinish;
        } else if (tabtext === '热门') {
            list = goodRecommendHot;
        } else if (tabtext === '免费') {
            list = goodRecommendFree;
        }
         getlist(list); // 只调用一次
    }
    function getchanges(){
        // event.target.classList.remove('on')
    }
    function getlist(list) {
  // 清空现有内容
     modlist.innerHTML = '';
  
  // 处理空数据
        if (!list || list.length === 0) {
            modlist.innerHTML = '<div>暂无数据</div>';
            return;
        }
  // 渲染列表（直接使用传入的list数组）
        list.forEach(item5 => {
            modlist.innerHTML += `
            <div class="modone">
                <div class="modleft">
                <a href="./yy-bookDetail.html?id=${item5.id}"><img src="${item5.imgUrl}" alt="${item5.name}"></a>
                </div>
                <div class="modright">
                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.content || ''}</a>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <span>作者: </span>
                    <span>${item5.authorName || '未知'}</span>
                </a>
                </div>
            </div>
            `;
        });
        }
    fetch('https://app2.motie.com/pc/home?type=4').then(res=>res.json()).then(res1=>{
        console.log(res1.data.strongPush.templateList)
        // 存储数据到数组
          goodRecommendHot = res1.data.goodRecommendHot?.templateList || [];
            goodRecommendFree = res1.data.goodRecommendFree?.templateList || [];
            goodRecommendFinish = res1.data.goodRecommendFinish?.templateList || [];
// 渲染本周强推
        res1.data.strongPush.templateList.forEach(item=> {
            booklists.innerHTML+=`
                 <li>
                        <a href="./yy-bookDetail.html?id=${item.id}">
                             <span>「${item.content}」</span>${item.name}
                        </a>
                </li>
            `
        });
        // 第一个轮播
        console.log(res1.data.slide)
        res1.data.slide.templateList.forEach(item1=>{
            swipers.innerHTML+=`
             <div class="swiper-slide"><img src="${item1.imgUrl}" alt=""></div>
            `
        })
        initSwiper()
         res1.data.hotBook.templateList.forEach(item1=>{
            swp2.innerHTML+=`
              <div class="swiper-slide ">
                <div class="bd">
                        <img src="${item1.imgUrl}" alt="">
                        <div class="sw-bottom">
                        <p class="book-name">${item1.name}</p>
                        <p class="book-author">作者：<span>${item1.authorName}</span></p>
                        </div>
                </div>
            </div>
            `
        })
         initSwiper1()
        //  热门推荐
          res1.data.hotRecommend.templateList.forEach(item2=>{
            hotinfo.innerHTML+=`
             <div class="hot1" onclick="jumps(${item2.id})">
                    <a href="./yy-bookDetail.html?id=${item2.id}">
                        <img src="${item2.imgUrl}" alt="">
                    </a>
                    <div class="hotbd">
                        <a href="./yy-bookDetail.html?id=${item2.id}">${item2.name}</a>
                        <a href="./yy-bookDetail.html?id=${item2.id}">${item2.content}</a>
                    </div>
                </div>
            `
        })
        // 第一张长图
            bigimg.innerHTML=`
                <a href="./yy-bookDetail.html?id=${res1.data.banner1img.templateList[0].id}">
                    <img src="${res1.data.banner1img.templateList[0].imgUrl}" alt="">
                </a>
            `
               let arr=res1.data.pvRank.templateList.slice(0,6)
               console.log(arr)
                 var num=1
            arr.forEach(item3=>{
            rank1.innerHTML+=`
            <li>
                    <span>${num}</span>
                    <a href="./yy-bookDetail.html?id=${item3.id}">${item3.name}</a>
                </li>
            `
             num++
        })
         let arr1= res1.data.recommendRank.templateList.slice(1,9)
         var num1=2
        arr1.forEach(item4=>{
            goodlist.innerHTML+=`
             <li>
                    <span>${num1}</span>
                    <a href="./yy-bookDetail.html?id=${item4.id}">${item4.name}</a>
                </li>
            `
            num1++
        })
        // 渲染好书推荐下面
         getlist(goodRecommendHot);
          res1.data.goodRecommendSub.templateList.forEach(item5=>{
            namebottom.innerHTML+=`
            <li>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <p><span>[${item5.name}] &nbsp;</span>${item5.content}</p>
                </a>
            </li>
            `
        })
// 新书推荐
    arr3=res1.data.newRecommend.templateList.slice(0,2)
    arr3.forEach(item5=>{
    newone.innerHTML+=`
                 <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                            <p class="bookinfo"> ${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                    </div>
            `
        })
         arr4=res1.data.newRecommend.templateList.slice(2,6)
            arr4.forEach(item5=>{
            listbook2.innerHTML+=`
                <ul class="list1">
                        <li>
                            <a href="./yy-bookDetail.html?id=${item5.id}">
                                <img src="${item5.imgUrl}" alt="">
                            </a>
                            <div class="listinfo">
                                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.content}</a>
                            </div>
                        </li>
                </ul>
                    `
                })
        //    新书榜
        arr5= res1.data.newBookRank.templateList.slice(1,9)
        var num2=2
        arr5.forEach(item5=>{
        rank2.innerHTML+=`
            <li  class="two">
                <span>${num2}</span>
                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
            </li>
                `
                num2++
            })
            // 精品推荐
             arr6=res1.data.recommend.templateList.slice(0,2)
            arr6.forEach(item5=>{
            newone1.innerHTML+=`
                <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                            <p class="bookinfo"> ${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                    </div>
        `
        })
             arr7=res1.data.recommend.templateList.slice(2,6)
            arr7.forEach(item5=>{
            listbook3.innerHTML+=`
                <ul class="list1">
                        <li>
                            <a href="./yy-bookDetail.html?id=${item5.id}">
                                <img src="${item5.imgUrl}" alt="">
                            </a>
                            <div class="listinfo">
                                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                                <a href="./yy-bookDetail.html?id=${item5.id}">${item5.content}</a>
                            </div>
                        </li>
                </ul>
                    `
                })
                // 畅销榜
                const rank3=document.querySelector('.rank-3')
                 arr6= res1.data.hotRank.templateList.slice(1,9)
                var num3=2
                arr6.forEach(item5=>{
                rank3.innerHTML+=`
                    <li  class="two">
                        <span>${num3}</span>
                        <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                    </li>
                `
                num3++
            })
                //  第二张图
                 const bigimg1=document.querySelector('.bigimg1')
                    bigimg1.innerHTML=`
                        <a href="./yy-bookDetail.html?id=${res1.data.banner3img.templateList[0].id}">
                            <img src="${res1.data.banner3img.templateList[0].imgUrl}" alt="">
                        </a>
                    `
            // 现代言情
            const listbook4=document.querySelector('.listbook4')
                  arr6=res1.data.category1.templateList.slice(0,2)
            arr6.forEach(item5=>{
            listbook4.innerHTML+=`
                <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">	${item5.name}</a>
                            <p class="bookinfo">${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                </div>
        `
        })
        const namebottom1=document.querySelector('.namebottom1')
         arr7=res1.data.category1.templateList.slice(2,8)
          arr7.forEach(item5=>{
            namebottom1.innerHTML+=`
            <li>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <p><span>[${item5.content}] &nbsp;</span>${item5.name}</p>
                </a>
            </li>
            `
        })
            // 古代言情
             const listbook5=document.querySelector('.listbook5')
                  arr6=res1.data.category2.templateList.slice(0,2)
            arr6.forEach(item5=>{
            listbook5.innerHTML+=`
                <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">	${item5.name}</a>
                            <p class="bookinfo">${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                </div>
        `
        })
            const namebottom2=document.querySelector('.namebottom2')
            arr7=res1.data.category2.templateList.slice(2,8)
              arr7.forEach(item5=>{
            namebottom2.innerHTML+=`
            <li>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <p><span>[${item5.content}] &nbsp;</span>${item5.name}</p>
                </a>
            </li>
            `
        })
        // VIP
           const rank4=document.querySelector('.rank-4')
                arr6= res1.data.finishVip.templateList.slice(1)
                var num3=2
                arr6.forEach(item5=>{
                rank4.innerHTML+=`
                    <li  class="two">
                    <span>${num3}</span>
                    <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                </li>
                `
                num3++
            })
            // 玄幻言情
            const listbook6=document.querySelector('.listbook6')
                  arr6=res1.data.category3.templateList.slice(0,2)
            arr6.forEach(item5=>{
            listbook6.innerHTML+=`
                <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">	${item5.name}</a>
                            <p class="bookinfo">${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                </div>
        `
        })
        const namebottom3=document.querySelector('.namebottom3')
         arr7=res1.data.category3.templateList.slice(2,8)
          arr7.forEach(item5=>{
            namebottom3.innerHTML+=`
            <li>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <p><span>[${item5.content}] &nbsp;</span>${item5.name}</p>
                </a>
            </li>
            `
        })
            // 其他
             const listbook7=document.querySelector('.listbook7')
            arr6=res1.data.category4.templateList.slice(0,2)
            arr6.forEach(item5=>{
            listbook7.innerHTML+=`
                <div class="book-block">
                        <a href="./yy-bookDetail.html?id=${item5.id}">
                            <img src="${item5.imgUrl}" alt="">
                        </a>
                        <div class="book-bd">
                            <a href="./yy-bookDetail.html?id=${item5.id}">	${item5.name}</a>
                            <p class="bookinfo">${item5.content}</p>
                                <p class="authors">作者：<span><a href="./yy-bookDetail.html?id=${item5.id}">${item5.authorName}</a></span></p>
                        </div>
                </div>
        `
        })
        const namebottom4=document.querySelector('.namebottom4')
         arr7=res1.data.category4.templateList.slice(2,8)
          arr7.forEach(item5=>{
            namebottom4.innerHTML+=`
            <li>
                <a href="./yy-bookDetail.html?id=${item5.id}">
                    <p><span>[${item5.content}] &nbsp;</span>${item5.name}</p>
                </a>
            </li>
            `
        })
        // 免费
           const rank6=document.querySelector('.rank-6')
                arr6= res1.data.freeRecommend.templateList.slice(1)
                var num3=2
                arr6.forEach(item5=>{
                rank6.innerHTML+=`
                    <li  class="two">
                    <span>${num3}</span>
                    <a href="./yy-bookDetail.html?id=${item5.id}">${item5.name}</a>
                </li>
                `
                num3++
            })

            // 中三部图
            const threeimg=document.querySelector('.threeimg')
            res1.data.banner2img.templateList.forEach(item=>{
                threeimg.innerHTML+=`
                    <a href="./yy-bookDetail.html?id=${item.id}">
                        <img src="${item.imgUrl}" alt="">
                    </a>
                    
                `
            })
        //    第三张大图
             const bigimg2=document.querySelector('.bigimg2')
                    bigimg2.innerHTML=`
                        <a href="./yy-bookDetail.html?id=${res1.data.banner4img.templateList[0].id}">
                            <img src="${res1.data.banner4img.templateList[0].imgUrl}" alt="">
                        </a>
                    `
        }).catch(err=>{
        console.log(err)
    })
    // 下面
    const contentall=document.querySelector('.contentall')
     const tab=document.querySelector('.tab')
    arr3=['全部','免费','VIP']
        arr3.forEach((item,index)=>{
            const isActive = index === 0 ? 'on' : '';
            tab.innerHTML+=`
            <li class="${isActive}" onmouseover="getbottom(${index})">${item}</li>
            `
        })
       function getbottom(index){
              const tab1 = event.target.closest('li');
                if (tab1) {
                    // 移除所有标签的active类
                    document.querySelectorAll('.tab li').forEach(li => li.classList.remove('on'));
                    // 给当前标签添加active类
                    tab1.classList.add('on');
                }
            getlists(index)
        }
        function getlists(index){
            fetch(`https://app2.motie.com/pc/recentUpdates?siteType=4&type=${index}`).then(res=>res.json()).then(res1=>{
            contentall.innerHTML=''
            res1.data.forEach(item=>{
                let datas = new Date(item.lastUpdateTime)
                let year = datas.getFullYear();
                let mouse = datas.getMonth() + 1;
                let day = datas.getDate();
                let hours = datas.getHours().toString().padStart(2, '0');
                let second = datas.getSeconds().toString().padStart(2, '0');
                let minute = datas.getMinutes().toString().padStart(2, '0');
            console.log(year)
                contentall.innerHTML+=`
                <div class="firstout">
                    <a class="out1" href="./yy-bookDetail.html?id=${item.id}">${item.sort}</a>
                    <a class="out2" href="./yy-bookDetail.html?id=${item.id}">${item.bookName}</a>
                    <a class="out3" href="./yy-bookDetail.html?id=${item.id}">${item.chapterName}</a>
                    <a class="out4" href="./yy-bookDetail.html?id=${item.id}">${item.authorName}</a>
                    <a class="out5" href="">${year}-${mouse}-${day}   ${hours}:${minute}:${second}</a>
                </div>
                `
            })
        
        }).catch(err=>{
            console.log(err)
        })
        }
            getlists(0)
            // 首行
        const tops=document.querySelector('.tops')
        const moreStyle=document.querySelector('.moreStyle')
        fetch('https://app2.motie.com/pc/float?type=4').then(res=>res.json()).then(res1=>{
            res1.data.slice(0,4).forEach(item=>{
                tops.innerHTML+=
               ` <li><a href="./yy-bookDetail.html?id=${item.id}">${item.name}</a></li>`
            })
             res1.data.slice(4).forEach(item=>{
                moreStyle.innerHTML+=
               ` <a class="like" href="./yy-bookDetail.html?id=${item.id}">${item.name}</a>`
            })
            console.log(res1.data.slice(4))
        }).catch(err=>{
            console.log(err)
        })
        // 滚动监听
        const scrolls = document.querySelector('.scrolls');
        // 定义触发显示的滚动距离
        const triggerDistance = 200;

        // 节流函数：优化滚动性能
        function throttle(fn, delay = 100) {
        let timer = null;
        return function(...args) {
            if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
            }
        };
        }

        // 滚动监听处理函数
        function handlePageScroll() {
        // 获取页面滚动距离（垂直方向）
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // 当滚动距离 >= 触发值时显示，否则隐藏
        if (scrollTop >= triggerDistance) {
            scrolls.classList.add('show');
        } else {
            scrolls.classList.remove('show');
        }
        }

        // 监听页面滚动事件（使用节流优化）
        window.addEventListener('scroll', throttle(handlePageScroll));

// 初始检查一次（页面刷新时可能已有滚动距离）
handlePageScroll();
    function initSwiper(){
         var swiper1 = new Swiper(' .swiper1 .swiper-container', {
        pagination: '.swiper-pagination1',
        nextButton: '.custom-next',
        prevButton: '.custom-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        loop:true
    });
    }
     function initSwiper1(){
          var swipers2 = new Swiper('.swiper2 .swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        loop:true
    });
    }
    </script>
    <!-- 登录 -->
     <!-- <script>
        function getjump(){

        }
     </script>
      -->
     <script>
        // 搜索
        const newSearch = () => {
            const input = document.querySelector('input')
            const searchLists = document.querySelector('.searchList')
            if (input.value.trim() == '') {
                searchLists.innerHTML = ''
            } else {
                fetch(`https://app2.motie.com/search?objectType=2&word=${input.value}&pageSize=2`).then(res => res.json()).then(res1 => {
                    let datelist = ''
                    searchLists.innerHTML = ''
                    res1.data.bookList.forEach((dates, everys) => {
                        datelist += `
                        <li class="lines">
                            <a href="./yy-bookDetail.html?id=${dates.id}">
                            <div class="imgbox">
                                <img src="${dates.icon}" alt="">
                            </div>
                            <div class="details">
                                <p class="bookName">
                                   ${dates.name}
                                </p>
                                <p class="book-authors">${dates.authorName}</p>
                            </div>
                            </a>
                        </li>
                    `
                    })
                    searchLists.innerHTML = `
                    <li>
                       <a class="about" href="">
                                <p class="noimg">搜“<span>${input.value}</span>”相关作品>></p>
                        </a>
                    </li>
                    ${datelist}      
                `
                }).catch(err => {
                    console.log(err)
                })
            }
        }
        document.addEventListener('click', (event) => {
            const searchLists = document.querySelector('.searchList');
            const searchContainer = document.querySelector('.search');

            // 检查元素是否存在
            if (!searchLists || !searchContainer) return;

            const isClickInsideSearch = searchContainer.contains(event.target) ||
                searchLists.contains(event.target);

            if (!isClickInsideSearch && searchLists.innerHTML.trim() !== '') {
                searchLists.innerHTML = '';
            }
        });
        document.addEventListener('DOMContentLoaded', function () {
            const totop = document.querySelector(".totop");
            if (totop) {
                totop.addEventListener('click', function () {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            }
        });
    </script>
    
</html>